<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'tree.jsp' starting page</title>
    
	<link rel="stylesheet" href="css/demo.css" type="text/css">
	<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
  </head>
  
  <style type="text/css">
		div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
		div#rMenu ul li{
			margin: 1px 0;
			padding: 0 5px;
			cursor: pointer;
			list-style: none outside none;
			background-color: #DFDFDF;
		}
	</style>
  

<body>
	<div style="width:250px">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
	<div id="rMenu">
		<ul>
			<li id="m_edit" onclick="myEditName();">重命名节点</li>
			<li id="m_add" onclick="addTreeNode();">增加节点</li>
			<li id="m_del" onclick="removeTreeNode();">删除节点</li>
		</ul>
	</div>
	
	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  	<script type="text/javascript" src="js/jquery.ztree.all-3.2.js"></script>
	<script type="text/javascript">
	
   
   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
   var setting = {
		   
		async: {
			enable: true,
			url:"treeAjax.action",
			autoParam:["id","pId","categoryname"],
			dataFilter: filter,
		},
		
		data:{
			simpleData:{
						enable:true,
						idKey:"id",
						pIdKey:"pId",
						rootPld:0,
				},

			key:{
				name:"categoryname",
			},
			keep: {
				parent: true
			}
		},
			
		callback: {
				onRightClick: OnRightClick,
				beforeRemove: beforeRemove,

				beforeDrag: beforeDrag,
				beforeDrop: beforeDrop,

				onDrop: zTreeOnDrop,
				onClick:onClick
				
		},

		edit:{
			drag: {
				autoExpandTrigger: true,
				prev: false,
				inner: dropInner,
				next: false
			},
			enable: true,
			showRemoveBtn: false,
			showRenameBtn: false
		},
		view: {
				selectedMulti: false
		},
		
   
   };
	//超链接
	function onClick(event, treeId, treeNode){
		//alert(event.id+"," +treeNode.id + ", " + treeNode.categoryname);
		//$.post("urlAjax.action",{id:treeNode.id,categoryname:treeNode.categoryname});
			window.location.href="myurl.action?id=treeNode.id";
		}

   
	//节点拖拽方法
	function dropPrev(treeId, nodes, targetNode) {
			var pNode = targetNode.getParentNode();
			if (pNode && pNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					var curPNode = curDragNodes[i].getParentNode();
					if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
						return false;
					}
				}
			}
			return true;
		}
		function dropInner(treeId, nodes, targetNode) {
			
			if (targetNode && targetNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					if (!targetNode && curDragNodes[i].dropRoot === false) {
						return false;
					} else if (curDragNodes[i].parentTId && curDragNodes[i].getParentNode() !== targetNode && curDragNodes[i].getParentNode().childOuter === false) {
						return false;
					}
				}
			}
			return true;
		}
		function dropNext(treeId, nodes, targetNode) {
			var pNode = targetNode.getParentNode();
			if (pNode && pNode.dropInner === false) {
				return false;
			} else {
				for (var i=0,l=curDragNodes.length; i<l; i++) {
					var curPNode = curDragNodes[i].getParentNode();
					if (curPNode && curPNode !== targetNode.getParentNode() && curPNode.childOuter === false) {
						return false;
					}
				}
			}
			return true;
		}
	
	function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) {
		//alert(targetNode.categoryname+","+treeNodes[0].id+","+treeNodes[0].categoryname);
		$.post("dragAjax",{id:treeNodes[0].id,parentid:targetNode.id});
    	//alert(treeNodes.length + "," + (targetNode ? (targetNode.tId + ", " + targetNode.name) : "isRoot" ));
	};
	
	
  
	function beforeDrop(treeId, treeNodes, targetNode, moveType) {
		return targetNode ? targetNode.drop !== false : true;
	}
	var log, className = "dark", curDragNodes, autoExpandNode;
	function beforeDrag(treeId, treeNodes) {
		className = (className === "dark" ? "":"dark");
		for (var i=0,l=treeNodes.length; i<l; i++) {
			if (treeNodes[i].drag === false) {
				curDragNodes = null;
				return false;
			} else if (treeNodes[i].parentTId && treeNodes[i].getParentNode().childDrag === false) {
				curDragNodes = null;
				return false;
			}
		}
		curDragNodes = treeNodes;
		return true;
	}

   //节点增加，删除，重命名方法
   function myEditName (){

	   var nodes = zTree.getSelectedNodes();
	   zTree.editName(nodes[0]);
	   hideRMenu();
	   }

  
   function OnRightClick(event, treeId, treeNode) {
	   nowTreeNode = treeNode;
		if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
			zTree.cancelSelectedNode();
			showRMenu("root", event.clientX, event.clientY);
		} else if (treeNode && !treeNode.noR) {
			zTree.selectNode(treeNode);
			showRMenu("node", event.clientX, event.clientY);
		}
	}

	function showRMenu(type, x, y) {
		$("#rMenu ul").show();
		if (type=="root") {
			$("#rMenu").hide();
		} else {
			$("#rMenu").show();
		}
		rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

		$("body").bind("mousedown", onBodyMouseDown);
	}
	function hideRMenu() {
		if (rMenu) rMenu.css({"visibility": "hidden"});
		$("body").unbind("mousedown", onBodyMouseDown);
	}
	function onBodyMouseDown(event){
		if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
			rMenu.css({"visibility" : "hidden"});
		}
	}
	
	//增加节点
	var addCount = 1;
	function addTreeNode() {
		selectNode = zTree.getSelectedNodes()[0];
		hideRMenu();
		nodeName = "增加" + (addCount++);
		addNodesAjax(selectNode,nodeName);
		
		zTree.addNodes(selectNode, [{ categoryname:nodeName , checked: selectNode.checked}]);
		
	}
	function addNodesAjax(selectNode,nodeName){
		$.post("addNodeAjax.action",{parentid:selectNode.id,categoryname:nodeName},function(category){
				alert(category.id+category.categoryname);
			});
		}
	//删除节点
	function removeTreeNode() {
		hideRMenu();
		var nodes = zTree.getSelectedNodes();
		if (nodes && nodes.length>0) {
			if (nodes[0].children && nodes[0].children.length > 0) {
				var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
				if (confirm(msg)==true){
					alert(nodes[0]);
					zTree.removeNode(nodes[0],callbackFlag = true);
				}
			} else {
				alert(nodes[0].id);
				zTree.removeNode(nodes[0],callbackFlag = true);
			}
		}
	}
	function beforeRemove(){
		var nodes = zTree.getSelectedNodes();
		$.post("removeAjax.action",{id:nodes[0].id,categoryname:nodes[0].categoryname});
	 		
		}
	
	


   function filter(treeId, parentNode, childNodes) {
		if (!childNodes) return null;
		for (var i=0, l=childNodes.length; i<l; i++) {
			childNodes[i].categoryname = childNodes[i].categoryname.replace(/\.n/g, '.');
			//childNodes[i].isParent = true;
		}
		return childNodes;
	}


   
   var zTree, rMenu,thisinput,nowTreeNode;
     $(document).ready(function(){
         
     		zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);
     		zTree = $.fn.zTree.getZTreeObj("treeDemo");
			rMenu = $("#rMenu");

			
			//初始化tree
	    	 $.post("initTreeAjax.action",{parentid:0},function(categoryList){
	    		 $.each(categoryList,function(){
	    			var newNodes;
	    				newNodes = {id:this.id,pId:this.parentid,categoryname:this.categoryname,isParent:true};
		    			
	    			 zTree.addNodes(null, newNodes);
						
					});

	        	 });

		//重命名节点
			$("#m_edit").click(function(){
				 
				 $("input").bind("blur",function(){
					$.post("renameAjax.action",{id:nowTreeNode.id,categoryname:this.value});
					 });
				 
				});

	  		
	  });

	      

  </script>
	
</body>
</html>
